<template>
  <div id="GDParam">
    
     <!-- 单选框 -->
    <div v-if="type=='radio'" style="width: 100%;">
        <el-radio border v-for="item in paramsDataList" 
        :key="item.dataValue" 
        v-model="modelValue" 
        :label="item.dataValue">{{ item.dataName }}</el-radio>
    </div>
    <!-- 复选框 -->
    <div v-if="type=='checkbox'" style="width: 100%;">
        <el-checkbox-group v-model="checkList" @change="checkBoxChange">
            <el-checkbox border  v-for="item in paramsDataList" 
            :key="item.dataValue" 
            :label="item.dataValue">{{ item.dataName }}</el-checkbox>
        </el-checkbox-group>
    </div>
    <!-- 查看模式 -->
    <div v-if="type=='show'" style="width: 100%;">
        <el-tag size="medium" :type="showData.type">{{ showData.name }}</el-tag>
    </div>
    <!-- 下拉框类型 -->
    <div v-else style="width: 100%;">
        <el-select style="width: 100%;" @change="selectChange" @clear="selectClear" v-model="modelValue" clearable :placeholder="placeholder">
            <el-option
            v-for="item in paramsDataList"
            :key="item.dataValue"
            :label="item.dataName"
            :value="item.dataValue">
            </el-option>
        </el-select>
     </div>
  </div>
</template>

<script>
import * as axiosAPI from '@/api/param.js';
export default {
  name: "GDParam",
  model:{
    data:"modelValue",
    event:"modelChange"
  },
  watch:{
    '$attrs.value':{
        handler(nv,ov){
            this.modelValue = nv;
        }
   },
   modelValue:function(nv,ov){
        if(this.type == "radio"){
            this.$emit("modelChange",nv);
            // 回调事件
            let res;
            for(let i in this.paramsDataList){
                if(this.paramsDataList[i].dataValue == nv){
                    res = this.paramsDataList[i];
                    break;
                }
            }
            this.$emit("radioChange",res);
        }else if(this.type == "checkbox"){
            this.checkList = nv;
        }
    }
  },
  mounted(){
    this.modelValue = this.$attrs.value;
  },
  props:{
    
    //组件类型 select：下拉选择 radio：单选 checkbox：多选 show：查看模式
    type:{
        type:String,
        default:"select"
    },
    //字典编号
    paramCode:{
        type:String,
        default:""
    },
    // 下拉框提示文字
    placeholder:{
        type:String,
        default:"请选择"
    }
  },
  created(){
    this.initParamData();
  },
  data() {
    return {
        modelValue:null,
        // 字典数据集合
        paramsDataList:[],
        // 多选选中的数据
        checkList:[],
        // 展示文字数据
        showData:{
            name:null,
            type:null
        }
    };
  },
  methods:{
    // 初始化字典信息
    initParamData(){
        let _this = this;
        axiosAPI.getParamByCode(this.paramCode)
        .then(function(res){
            _this.paramsDataList = res.data;

            if(_this.type=="show"){
                _this.getStrByCode(_this.modelValue);
            }

        });
    },
    // 下拉框改变
    selectChange(data){
        this.modelValue = data;
        this.$emit("modelChange",data);
        // 回调事件
        let res;
        for(let i in this.paramsDataList){
            if(this.paramsDataList[i].dataValue == data){
                res = this.paramsDataList[i];
                break;
            }
        }
        this.$emit("selectChange",res);
    },
    // 下拉框清空
    selectClear(){
        this.modelValue = null;
        this.$emit("modelChange",null);
        // 回调事件
        this.$emit("clear");
    },
    // 多选框选中
    checkBoxChange(data){
        this.modelValue = data;
        this.$emit("modelChange",data);

        let newArr = [];

        for(let c in data){
            // 回调事件
            let res;
            for(let i in this.paramsDataList){
                if(this.paramsDataList[i].dataValue == data[c]){
                    res = this.paramsDataList[i];
                    newArr.push(res);
                }
            }
        }

        // 回调事件
        this.$emit("checkboxChange",newArr);

    },
    // 根据code获取名字
    getStrByCode(values){
        let res;
            for(let i in this.paramsDataList){
                if(this.paramsDataList[i].dataValue == values){
                    res = this.paramsDataList[i];
                    break;
                }
            }

        this.showData.name = res.dataName;

        if(res.dataValue=="1"){
            this.showData.type="1";
        }else if(res.dataValue=="2"){
            this.showData.type="success";
        }else if(res.dataValue=="3"){
           this.showData.type="info";
        }else if(res.dataValue=="4"){
           this.showData.type="warning";
        }else{
           this.showData.type="danger";
        }

    }
  }
};
</script>

<style scoped></style>
